<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>渔人码头</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="css/flat.css" rel="stylesheet" />
    <link href="css/nav.css" rel="stylesheet" />
     <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
     <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <!-- jQuery文件 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.fly.min.js"></script><!--飞入购物车特效 js-->
    <script src="js/requestAnimationFrame.js"></script> <!--飞入购物车特效 js IE10以下-->
</head>
<body class="index-bg" >
    <!-- Start diet -->
    <div class="diet">
        <!--diet Nav tabs -->
        <div class="taca">
            <ul class="nav nav-tabs">
                <li class="active"><a href="index.html">点菜</a></li>
                <li class="diet-li"><a href="order.html" >订单</a></li>
                <li class=""><a href="about.html">店家</a></li>
            </ul>
        </div>
        
        <!--diet Tab panes -->
        <div class="tab-content">
            <!-- 点菜 -->
            <div class="active" id="home">
                <div id="" class="take-menu clearfix">
                    <div id="menu-au" >
                        <div id="J_menuList" class="">
                        </div>    
                    </div>
        
                    <div class="take-menu-more" >
                        <div class="top-stick"></div> 
                        <div class="take-menu-list">
                            <div class="" id="J_list_Container" >
                                
                            </div>
                        </div>
                    </div>
                    <div style="height:100px;"></div>
                </div>
                
                <!-- 购物车订单列表 -->
                <div class="toolbar-wrap J-wrap">
                    <div class="toolbar">
                        <div class="toolbar-panels J-panel">
                            <div style="visibility: hidden;" class="J-content toolbar-panel tbar-panel-cart toolbar-animate-out">
                                <div class="tbar-panel-main">
                                    <div class="tbar-panel-content J-panel-content">
                                        <div id="J-cart-render">
                                            <div class="tbar-cart-list">
                                                <div id="wrapper2" class="viewer wrapper countpage clearfix" style="">
                                                    <section class="oder_content">
                                                        <div class="container" id="J_order_list">
                                                        </div>
                                                    </section>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tbar-panel-footer J-panel-footer"></div>
                        </div>
                    </div>
                        
                    <div class="toolbar-tabs J-tab" id="myOrder" style="" >
                        <div style=" " class="toolbar-tab tbar-tab-cart" id="cartarea" onclick="show()"> 
                            <img  style="max-width:50px; z-index:9999" src="images/cart-no.png" class="img1 db"/> 
                            <img  style="max-width:50px; z-index:9999" src="images/cart.png" class="img2 db dn"/> 

                            <span style="font-size:12px;position: absolute; top:-5px; left:35px;background-color: #eb3634;color:#fff;font-family:Verdana;font-weight:normal;width:24px;height:24px;line-height:24px;text-align:center;border:1px solid #fff;border-radius:15px;"  id="num" class="num">
                                
                            </span>
                        </div>
                        <div class="f-fix">
                            <div class="order_title">                          
                                <div class="clearfix foot_orderList">
                                  <b>总共</b> ¥ <span class="price" id="price_txt">0</span>
                                </div>
                            </div>
                            <div class="oder_submit">                      
                                <button class="dw1" id="submitOrder">
                                    <a>下单</a>
                                </button>
                                <button class="dw2 dn" id="submitOrder">
                                    <a href="cart.html">下单</a>
                                </button> 
                            </div>
                        </div>
                       
                    </div>      
                    <div class="toolbar-mini"></div>
                </div>
                <div id="J-toolbar-load-hook"></div>
                <div id="overDiv" style="display:none;"></div> 
            </div>
        </div>
    </div>
    <!-- End diet -->


<script>

    var iG = iG||{};
    var num = 0;
    if(window.localStorage)
    {
        try{
            iG = JSON.parse(localStorage["zaiG"])||{};
            }catch(e){
                localStorage.removeItem("zaiG");
                iG = iG||{};
                }
    }
    else{
            iG = iG||{};
        }
    $(function(){

    setTimeout(function () { window.scrollTo(0, 1); }, 0); 
    setTimeout(function () {
        iG["order"] = {};

        iG.items={
            "前菜":
            [   {id:"1",avater:"images/avater.jpg",username:"小诺",discount:"10",name:"芒果布丁芒果芒果布丁芒果芒果布丁芒果",cls:"前菜",intr:"甜甜糯糯，管饱。上好糯米蒸制",price:"150.55",imageUrl:"images/goods.jpg"},
                {id:"2",avater:"images/avater.jpg",username:"小诺",discount:"",name:"芒果布丁1",cls:"前菜",intr:"前菜2",price:"10",imageUrl:"images/goods.jpg"}
            ],
            "热菜":
            [   {id:"3",avater:"images/avater.jpg",username:"小诺",discount:"",name:"芒果布丁2",cls:"热菜",intr:"前菜3",price:"888",imageUrl:"images/goods.jpg"},
                {id:"4",avater:"images/avater.jpg",username:"小诺",discount:"",name:"芒果布丁3",cls:"热菜",intr:"前菜4",price:"153",imageUrl:"images/goods.jpg"}
            ],
            "饮料":
            [   {id:"5",avater:"images/avater.jpg",username:"小诺",discount:"",name:"芒果布丁4",cls:"饮料",intr:"前菜5",price:"152",imageUrl:"images/goods.jpg"},
                {id:"6",avater:"images/avater.jpg",username:"小诺",discount:"",name:"芒果布丁5",cls:"饮料",intr:"前菜6",price:"154",imageUrl:"images/goods.jpg"},
                {id:"7",avater:"images/avater.jpg",username:"小诺",discount:"",name:"芒果布丁6",cls:"饮料",intr:"前菜7",price:"151",imageUrl:"images/goods.jpg"},
                {id:"8",avater:"images/avater.jpg",username:"小诺",discount:"",name:"芒果布丁7",cls:"饮料",intr:"前菜8",price:"152",imageUrl:"images/goods.jpg"}
            ]
        
        };
        init();//ajax成功后执行init(); 
        }, 20);//模拟ajax请求时间
            
    $("body").on("click",".list_id_respone ",function(){
        iG["order"] = iG["order"]||{};
        var index = $(this).attr("data_id");
 
        <!--标签+1-->
        var n=$("#num").text();
        n++;
        $("#num").text(n);
                
            
        if(iG.order[index])
        {
            iG.order[index].counter = iG.order[index].counter + 1;
        }else{
            var obj = getIndex(index);
            iG.order[index] = obj;
            iG.order[index].counter = 1;
            }
        if(window.localStorage)
        {
            localStorage["zaiG"] = JSON.stringify(iG);
        }
        $('#num').css("display","block");
        $("#cartarea .img1").addClass("dn");
        $("#cartarea .img2").removeClass("dn");
        $("#price_txt").html(countPrice() + "");
        
            
    });
              
    //飞入购物车
    var offset = $("#cartarea").offset();
    
    $("body").on("click",".list_add strong",function(event){
        //alert("aa");
        var addcar = $(this);
        var img = addcar.closest(".row").find('img').attr('src');
        var flyer = $('<img class="u-flyer" src="'+img+'">');
        flyer.fly({
            start: {
                left: event.pageX-30,
                top: event.pageY-30
            },
            end: {
                left: offset.left+20,
                top: offset.top+10,
                width: 0,
                height: 0
            },
            onEnd: function(){
            }
        });
        $('#num').css("display","block");
        $("#cartarea .img1").addClass("dn");
        $("#cartarea .img2").removeClass("dn");
        $(".dw1").addClass("dn");
        $(".dw2").removeClass("dn");

        $.ajax(
                {
                    type:"post",
                    dataType:"json",
                    url:"car?action=add",
                    success:function(result){

                    }
                }
            )
    });




$(document).ready(function(){
    
  $("#cartarea").click(function(){
  $("#overDiv").toggle();
  });
  $("#overDiv").click(function(){
  $("#overDiv").hide();
  $('.toolbar-wrap').removeClass('toolbar-open');
  $('.tbar-panel-cart').css({'visibility':"hidden","z-index":"-1"});
  });
});

               
    $("#myOrder").click(function(){

        $(".viewer clearfix,#submitView").removeClass("show");
        $(".viewer clearfix,#submitView").removeClass("hide");
        $("#wrapper2").addClass("show");
        $("#J_order_list").html(buildOrder(iG.order));
        $("#price_txt").html(countPrice() + ""); 
    });

    $("body").on("click","#menu",function(){
        $(".wrapper,#wrapper").removeClass("show");
        $(".wrapper,#wrapper").removeClass("hide");
        $("#wrapper").addClass("show");
        $("#wrapper2").addClass("hide");
        $("#submitView").removeClass("hide");
        $("#submitView").addClass("hide");
    });
    $("body").on("click","#order",function(){
        $(".wrapper,#wrapper").removeClass("show");
        $(".wrapper,#wrapper").removeClass("hide");
        $("#wrapper").addClass("hide");
        $("#wrapper2").removeClass("hide");
        $("#container").removeClass("hide");
        $("#container").addClass("show");
    });
            
    //点击菜单按钮，切换到菜单界面
    $("body").on("click","#menu",function(){
        alert("aa");
        $(".wrapper,#wrapper").removeClass("show");
        $(".wrapper,#wrapper").removeClass("hide");
        $("#wrapper").addClass("show");
        $("#wrapper2").addClass("hide");
        $("#container").removeClass("hide");
    });
    //放大菜品
    $("body").on("click",".foot-img img",function(){
        $("#imgViewer img").attr("src",$(this).attr("src"));
        $("#imgViewer").show();
        var item = getIndex($(this).attr("data_id"));
        $("#J_imgInfo").html("<strong>"+ item.name +"</strong><span class=\"colred\">"+ item.price +"元/例粒</span>");
        var img = new Image();
        img.src = $(this).attr("src");
        if(img.complete)
        {
            $(".imgViewer_contain").css("max-width",img.width + "px")
            $("#imgViewer .imgViewer_contain").css("margin-top",$(window).height() / 2.5 - img.height / 2 + "px");
            img = null;
        }else{
            img.onload=function(){
                $(".imgViewer_contain").css("max-width",this.width + "px");
                $("#imgViewer .imgViewer_contain").css("margin-top",$(window).height() / 2.5 - img.height / 2 + "px");
                img = null;
                };
            }
    });
    //隐藏放大图片
    $("body").on("click","#imgViewer",function(){
        $("#imgViewer").hide();
    });
            
    $("body").on("click",".counter_plus",function(){
        iG["order"] = iG["order"]||{};
        var index = $(this).attr("data_id");
                        
        //by zhou标签+1
        var n1=$("#num").text();
        n1++;
        $("#num").text(n1);
                        
                        
        if(iG.order[index]){
            iG.order[index].counter = iG.order[index].counter + 1;
        }else{
            var obj = getIndex(index);
            iG.order[index] = obj;
            iG.order[index].counter = 1;
        }
        $(this).siblings(".nocounter").html(iG.order[index].counter);
        $("#price_txt").html(countPrice() + "");
        if(window.localStorage){
            localStorage["zaiG"] = JSON.stringify(iG);
        }
    });
    
    
    $("body").on("click",".counter_minus",function(){

        //by zhou标签-1
        var n2=$("#num").text();
        if(n2 == 0)return;
        if(n2 >0){ 
            n2--;
            $("#num").text(n2);  
        }
        
        $.ajax(
            {
                type:"post",
                dataType:"json",
                url:"car?action=minus",
                success:function(result){
                }
            }
        )
                
        iG["order"] = iG["order"]||{};
        var index = $(this).attr("data_id");
        if(iG.order[index].counter === 0)return;
        if(iG.order[index]){
            iG.order[index].counter = iG.order[index].counter - 1;
        }else{
            var obj = getIndex(index);
        iG.order[index] = obj;
            iG.order[index].counter = 1;
            }
        $(this).siblings(".nocounter").html(iG.order[index].counter);
        $("#price_txt").html(countPrice() + "元");
        if(window.localStorage){
            localStorage["zaiG"] = JSON.stringify(iG);
        }
        $("#J_order_list").html(buildOrder(iG.order));
    });
        
    $("body").on("click","#clearOder",function(){
        iG["order"] = {};
        //标签清零
        var n=0;
        $("#num").text(n);
        $.ajax(
                {
                    type:"post",
                    dataType:"json",
                    url:"car?action=clear",
                    success:function(result){
                        //iG.items = result;
                        //init();//ajax成功后执行init();
                    }
                }
            )
            
        $("#J_order_list").html(buildOrder(iG.order));
        $("#price_txt").html(countPrice() + "元");
        if(window.localStorage){
            localStorage["zaiG"] = JSON.stringify(iG);
        }
        $(".dw2").addClass("dn");
        $(".dw1").removeClass("dn");
        $('#num').css("display","none");
        $("#cartarea .img2").addClass("dn");
        $("#cartarea .img1").removeClass("dn");
    });
    
    //点击菜品分类，显示对应菜品
    $("body").on("click","#J_menuList dd ",function(){
        iG.indexMenu = $(this).attr("data_name");
        $("#J_list_Container").html(listManger(iG.items));
        $("#J_menuList .active").removeClass("active");
        $(this).addClass("active");
    });

    });
    //初始化加载隐藏
    function init(){
        setMenu(iG.items);
        $("#J_list_Container").html(listManger(iG.items));
        $("#loadingView").addClass("hide");
    }
    //设置菜单   
    function setMenu(_list){
        iG.menu = [];
        iG.indexMenu = (function(){
            var menu;
            var count = 0;
            for(var i in _list){
                if(count===0){
                    menu =  i;
                }
                count++;
                iG.menu.push(i);
            }
            return menu;
        })();
        buildMenu(iG.menu);
    }


    //菜单列表显示
    function buildMenu(_list){
        var menuHtml = "<dl>";
        var active;
        for(var i in _list){
            active = "";
            if(_list[i]===iG.indexMenu)active = "active";
                menuHtml += "<dd class=\""+active+"\" data_name=\""+ _list[i] +"\"><a data_name=\""+ _list[i] +"\">"+ _list[i] +"</a></dd>"
            }
            menuHtml += "</dl>";
        $("#J_menuList").html(menuHtml);
    }
    //放大菜品的样式    
    function getIndex(_id){
        var indexList = iG.items[iG.indexMenu];
        for(var i in indexList){
            if(indexList[i].id===_id){
                return indexList[i]
            }
        }
    }

    function countPrice(){
        var price = 0;
        for(var i in iG.order){
            price += Number(iG.order[i].price)*iG.order[i].counter;
        }
        return price.toFixed(2);
    }
    
    //菜品显示
    function listManger(_list){
        var result = "";
        var listArr = [];
        var indexList = _list[iG.indexMenu];
        for(var i in indexList){
            listArr.push(indexList[i]);
            if(Math.floor(i/3)===0&&i>2){
                result += "<div class=\"row\">";
                result += buildList(listArr);
                result += "</div>";
                listArr = [];
            }
        }
        result += "<div class=\"row\">";
        result += buildList(listArr);
        result += "</div>";
        return result;
    }

    //显示菜品内容    
    function buildList(_list){;
        var result = "";
        for(var i in _list){
            if(_list[i].discount==""){
               result +="<div class=\"take-menu-info clearfix\"><div class=\"left clearfix\"><a href=\"\" data-toggle=\"modal\" data-target=\"."+_list[i].id+"\"><div class=\"goods-pic\"><img src=\""+_list[i].imageUrl+"\" class=\"img-responsive\" alt=\"Responsive image\" data_id=\""+_list[i].id+"\" ></div><div class=\"price\"><div class=\"goods-name\">"+_list[i].name+"</div>";
                
                result +="<div><span id=\"nprice\" class=\"red\">¥"+_list[i].price+"</span>/份</div></div></a></div><div class=\"right\"><div class=\"btn_wrap\"><button class=\"minus\" style=\"display: none;\"><strong></strong></button><i style=\"\">0</i><button class=\"list_add list_id_respone\" data_id=\""+_list[i].id+"\"><strong></strong></button><em class=\"fixBig  fake\"></em></div></div></div><div class=\"modal fade tck-info "+_list[i].id+"\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"mySmallModalLabel\"><div class=\"modal-dialog modal-sm\">  <div class=\"modal-content\"><button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"></button><div class=\"tck-img\"><img src=\""+_list[i].imageUrl+"\" alt=\"\"></div><div class=\"tck-title\">"+_list[i].name+"</div><div class=\"tck-intr\">"+_list[i].intr+"</div><div class=\"tck-price clearfix\"><div class=\"left\"><span class=\"red\">¥"+_list[i].price+"</span>/份</div><div class=\"right\"><div class=\"btn_wrap\"><button class=\"minus\" style=\"display: none;\"><strong></strong></button><i style=\"\">0</i><button class=\"list_add list_id_respone\" data_id=\""+_list[i].id+"\"><strong></strong></button><em class=\"fixBig  fake\"></em></div></div></div></div></div></div>"; 
            }
            else{
                result +="<div class=\"take-menu-info clearfix\"><div class=\"left clearfix\"><a href=\"\" data-toggle=\"modal\" data-target=\"."+_list[i].id+"\"><div class=\"goods-pic\"><img src=\""+_list[i].imageUrl+"\" class=\"img-responsive\" alt=\"Responsive image\" data_id=\""+_list[i].id+"\" ></div><div class=\"price\"><div class=\"goods-name\">"+_list[i].name+"</div>";
                result += "<div class=\"discount\"><span class=\"red\">¥<i id=\"dis-price\">"+_list[i].price+"</i></span>/份</div>"; 
                result +="<div><span id=\"nprice\" class=\"red\">¥"+_list[i].discount+"</span>/份</div></div></a></div><div class=\"right\"><div class=\"btn_wrap\"><button class=\"minus\" style=\"display: none;\"><strong></strong></button><i style=\"\">0</i><button class=\"list_add list_id_respone\" data_id=\""+_list[i].id+"\"><strong></strong></button><em class=\"fixBig  fake\"></em></div></div></div><div class=\"modal fade tck-info "+_list[i].id+"\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"mySmallModalLabel\"><div class=\"modal-dialog modal-sm\">  <div class=\"modal-content\"><button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"></button><div class=\"tck-img\"><img src=\""+_list[i].imageUrl+"\" alt=\"\"></div><div class=\"tck-title\">"+_list[i].name+"</div><div class=\"tck-intr\">"+_list[i].intr+"</div><div class=\"tck-price clearfix\"><div class=\"left\"><span class=\"red\">¥"+_list[i].price+"</span>/份</div><div class=\"right\"><div class=\"btn_wrap\"><button class=\"minus\" style=\"display: none;\"><strong></strong></button><i style=\"\">0</i><button class=\"list_add list_id_respone\" data_id=\""+_list[i].id+"\"><strong></strong></button><em class=\"fixBig  fake\"></em></div></div></div></div></div></div>"; 
            }
                          
        } 
        return result;
    }
        
    function buildOrder(_list){
        var result = "<div class=\"row\" id=\"J_order_Manager\"><button id=\"clearOder\"class=\"button button-rounded button-flat\">清空购物车</button></div>";
        var check = true;
                
        for(var i in _list){
            if(_list[i].counter === 0)continue;
                        check = false;
                        result += "<div class=\"cart-menu-list cart-menu-lt clearfix\"><div class=\"cart-menu-left  clearfix\"><div class=\"left\"><img src=\""+_list[i].avater+"\"></div><div class=\"left cart-user\">"+_list[i].name+"</div><div class=\"right\">¥"+_list[i].price+"</div></div><div class=\"cart-menu-right clearfix\"><div class=\"\"><div class=\"btn_wrap counter\"><button class=\"list_minus counter_minus fl\" style=\"display: inline-block;\" data_id=\""+_list[i].id+"\" ontouchstart=\"\"><strong></strong></button><i class=\"nocounter fl\" style=\"display: inline-block;\">"+_list[i].counter+"</i><button class=\"list_add1 counter_plus\" data_id=\""+_list[i].id+"\" ontouchstart=\"\"><strong></strong></button><em class=\"fixBig  fake\"></em></div></div></div></div>";
                }
                if(check){
                        result += "<div class=\"row gray_line\"><div class=\"col-md-12 clearfix board_content\"><p style=\"text-align: center;\"><span>亲，还没选到心仪的菜喔，点加菜开始选菜吧！</span></p></div></div>";
        }
        return result;
    }
        
</script> 
<script type="text/javascript" src ='js/nav.js'></script> 

</body>
</html>